<template>
  <view>
    <view class="item" v-for="(item, i) in list" :key="i">
      <view class="item-top">
        <view class="item-top_l">
          <image :src="item.approveResult | status" alt="" class="tag" />
          <text class="txt" :class="[item.approveResult == 3 ? 'err' : '']"
            >{{ item.applyUser }} &nbsp;{{ item.approveMsg }}</text
          >
        </view>
        <view class="item-top_r">{{ item.approveTime }}</view>
      </view>
      <view class="item-user">
        <view class="user-box">
          <template v-for="(user, k) in item.selectedUserList">
            <view class="user-item" :key="k" v-if="k < showNum">
              <image class="user-item_icon" :src="user.headUrl" />
              <text class="user-item_name">{{ user.userName }}</text>
            </view>
            <default-icon @click="showNum=1000" :key="k" :types="3" v-if="k == showNum" />
          </template>
        </view>
        <view class="approval"  v-if="pendingApproval(item.selectedUserList,1)">
          待审批：{{pendingApproval(item.selectedUserList,2)}}
        </view>
        <opinion :list="item.selectedUserList" />
      </view>
    </view>
  </view>
</template>

<script>
import s1 from '../../images/icon_daishenp.svg';
import s2 from '../../images/icon_xuanzhong.svg';
import s3 from '../../images/icon_butongg.svg';
import defaultIcon from '../../common/default-icon.vue';
import opinion from './opinion.vue'
export default {
  name: 'desc-item',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  filters: {
    status(approveResult) {
      const icons = { 1: s1, 2: s2, 3: s3 };
      return icons[approveResult];
    },
  },
  data() {
    return {
      showNum: 4
    };
  },
  components: { defaultIcon,opinion },
  computed: {
    status() {
      return 1;
    },
  },
  methods: {
    // 过滤待审批
    pendingApproval(list=[],type=1) {
      if(type ==1) return !!(list.find(item=> item.approveResult ==1))
      if(type ==2) {
        const arr = []
        list.forEach(item => {
          if(item.approveResult ==1&& item.userName) {
           arr.push(item.userName)
          }
        });
        return arr.join('，')
      }
    }
  },

  created() {},
};
</script>
<style lang="scss" scoped>
.item {
  width: 100%;
  min-height: 270rpx;
  box-sizing: border-box;
  padding: 0 24rpx;
  &:nth-last-of-type(1) {
    .item-user {
      &::before {
        display: none;
      }
    }
  }
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:40rpx ;
    
    &_l {
      display: flex;
      padding-left: 52rpx;
      position: relative;
      .tag {
        width: 36rpx;
        height: 36rpx;
        position: absolute;
        background-color: #fff;
        left: 0;
        top: 0;
        z-index: 10;
      }
      .txt {
        font-size: 30rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #4275fd;
        &.err {
          color: #fe4f54;
        }
      }
    }
    &_r {
      font-size: 26rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;
    }
  }
  &-user {
    min-height: 170rpx;
    position: relative;
    padding: 32rpx 52rpx;

    &::before {
      display: inline-block;
      content: '';
      height: calc(100% + 20rpx);
      border-left: 1px solid #4275fd;
      position: absolute;
      left: 18rpx;
      top: -4rpx;
      z-index: 0;
    }

    .user-box {
      display: flex;
      flex-wrap: wrap;
      .user-item {
        height: 128rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-right: 24rpx;
        margin-bottom: 28rpx;
        &:nth-of-type(5n) {
          margin-right: 0;
        }
        &_icon {
          display: inline-block;
          height: 88rpx;
          width: 88rpx;
          border-radius: 50%;
        }
        &_name {
          font-size: 26rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #333333;
        }
      }
    }
  }
}
.approval {
  min-height: 52rpx;
  font-size: 26rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  line-height: 52rpx;
  text-align: left;
  color: #ff8948;
  white-space: wrap;
}
</style>
